<template>
  <view class="submit-eval-page">

    <view class="refund-instructions-wrap">
      <view class="refund-instructions">
        <view class="head" style="font-weight: bold;">评论内容</view>

        <view class="input-wrap">
          <van-field
            :value="message"
            type="textarea"
            placeholder="请输入评论内容"
            title-width="0"
            :autosize="remarkObj"
            :border="false"
            show-word-limit
            maxlength="200"
            input-class="input-wrap-bg"
            @input="handleInputVal"
            :disabled="is_comment === 1"
          />
        </view>
        <view class="head" style="font-weight: bold;padding-bottom: 25rpx;">
          <text style="margin-right: 12rpx">评分</text>

          <uni-rate
            v-model="scoreVal"
            :readonly="is_comment === 1"
          />

        </view>
      </view>
    </view>

    <view class="bottom-option">
      <view
        class="cancel"
        @click="handleCancel"
      >取消</view>
      <view
        class="submit"
        @click="handleSubmit"
      >提交</view>
    </view>

    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>

  </view>
</template>

<script>
  import Toast from '@/wxcomponents/vant/toast/toast';

  const app = getApp()

  export default {
    data() {
      return {
        is_comment: 0,
        scoreVal: '',
        message: '',
        remarkObj: {
          maxHeight: 120,
          minHeight: 120
        },
        expressId: '',
        oid: ''
      }
    },
    methods: {
      handleInputVal(res) {
        const {
          detail
        } = res

        this.message = detail
      },
      handleCancel() {
        uni.navigateBack()
      },
      handleSubmit() {
        const {
          is_comment
        } = this

        if (is_comment === 1) {
          Toast('暂不支持修改评价')
          return
        }
        const {
          message,
          scoreVal
        } = this

        if (!message) {
          Toast('请输入评论内容')
          return
        }

        if (!scoreVal) {
          Toast('请选择评分')
          return
        }

        Toast.loading({
          message: '加载中',
          mask: false,
          duration: 0,
          zIndex: 9999999,
          forbidClick: true
        })
        app.request({
          express_id: this.expressId,
          content: message,
          score: scoreVal,
          order_id: this.oid
        }, '/api/logistics/comment/send').then((res) => {
          const {
            code,
            data,
            msg
          } = res

          if (code === 1) {
            Toast('评价成功')

            setTimeout(() => {
              uni.navigateBack()
            },1000)
          } else {
            Toast(msg)
          }
        })
      }
    },
    onLoad(res) {
      const {
        expressId,
        oid,
        id,
        content,
        score,
      } = res
      let is_comment = parseInt(res.is_comment)
      this.is_comment = is_comment

      if (is_comment === 0) {
        // 未评价
        this.expressId = expressId
        this.oid = oid
      } else {
        // 已评价
        this.message = content || ''
        this.scoreVal = score
      }
    }
  }
</script>

<style lang="scss">
  .submit-eval-page {
    background-color: #F5F5F5;
    min-height: 100vh;

    .refund-instructions-wrap {
      width: 100%;
      padding: 0 24rpx 24rpx;
      box-sizing: border-box;
      .refund-instructions {
        background-color: #fff;
        border-radius: 6px;
        .head {
          display: flex;
          align-items: center;
          color: rgba(51, 51, 51, 100);
          font-size: 32rpx;
          font-family: PingFangSC-Medium;
          padding: 32rpx 32rpx 0;
          box-sizing: border-box;
        }

        .input-wrap {
          background-color: #F7F8FA;
          .van-field__word-limit {
            position: relative;
            bottom: 14rpx;
            z-index: 9999;
            margin-top: -40rpx;
            width: 100%;
            box-sizing: border-box;
            padding-right: 24rpx;
            color: #999;
          }
          .input-wrap-bg {
            border-radius: 4px;
            background-color: #F7F8FA;
            padding: 36rpx;
            box-sizing: border-box;
          }
        }

        .upload-image-wrap {
          width: 100%;
          padding: 0 32rpx;
          box-sizing: border-box;
        }
      }
    }

    .bottom-option {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #fff;
      z-index: 9999;
      .cancel {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 340rpx;
        height: 98rpx;
        border-radius: 2px;
        background-color: rgba(238, 238, 238, 1);
        color: rgba(0, 0, 0, 1);
        font-size: 36rpx;
        font-family: PingFangSC-Regular;
      }
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 340rpx;
        height: 98rpx;
        border-radius: 2px;
        background-color: #3D9CEF;
        color: rgba(255, 255, 255, 100);
        font-size: 36rpx;
        font-family: PingFangSC-Regular;
      }
    }

  }
</style>
